<pp-notice-container></pp-notice-container>
<header class="l-header flex-container flex-row">
    <pp-header-logo></pp-header-logo>
    <div class="l-widget-group">
        <pp-application-list-for-header-container></pp-application-list-for-header-container>
        <pp-server-map-options-container></pp-server-map-options-container>
        <pp-period-selector-container></pp-period-selector-container>
        <ng-container *ngIf="isAppSelected$ | async">
            <ng-container *ngIf="isScreenWideEnough$ | async; else searchIcon">
                <pp-transaction-id-search-container></pp-transaction-id-search-container>
            </ng-container>
            <ng-template #searchIcon>
                <button class="l-concised-search-button fas fa-search" (click)="onClickSearchIcon($event.target)"></button>
            </ng-template>
        </ng-container>
    </div>
    <button class="fa fa-question-circle" (click)="onShowHelp($event)"></button>
    <pp-configuration-icon-container></pp-configuration-icon-container>
</header>
<div class="l-main-container">
    <section class="l-main-section">
        <article class="l-main-contents">
            <router-outlet></router-outlet>
        </article>
        <pp-real-time-container *ngIf="enableRealTime$ | async"></pp-real-time-container>
    </section>
    <pp-side-bar-container *ngIf="isAppSelected$ | async"></pp-side-bar-container>
</div>
